<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>停车场管理系统</title>
    <link rel="stylesheet" href="css/index.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
</head>
<body>
    <div id="app">
        <header>
            <h1>
                <i class="fas fa-parking"></i>
                停车场管理系统
            </h1>
            <div class="user-info">
                欢迎，{{ userInfo.userName }}
                <a href="javascript:void(0)" @click="handleLogout">
                    <i class="fas fa-sign-out-alt"></i>
                    退出
                </a>
            </div>
        </header>

        <nav>
            <ul>
                <li v-if="userInfo.roleId === '1'">
                    <a href="pages/user/list.html">
                        <i class="fas fa-users"></i>
                        用户管理
                    </a>
                </li>
                <li>
                    <a href="pages/parking/list.html">
                        <i class="fas fa-id-card"></i>
                        停车位管理
                    </a>
                </li>
                <li>
                    <a href="pages/userCar/list.html">
                        <i class="fas fa-car"></i>
                        车辆管理
                    </a>
                </li>
                <li>
                    <a href="pages/tempParking/list.html">
                        <i class="fas fa-clock"></i>
                        临时停车管理
                    </a>
                </li>
                <li>
                    <a href="pages/fixedParking/list.html">
                        <i class="fas fa-bookmark"></i>
                        固定停车管理
                    </a>
                </li>
            </ul>
        </nav>

        <main>
            <div class="dashboard">
                <div class="stat-card">
                    <h3>
                        <i class="fas fa-car"></i>
                        总车位数
                    </h3>
                    <div class="value">{{ stats.totalSeats }}</div>
                </div>
                <div class="stat-card">
                    <h3>
                        <i class="fas fa-parking"></i>
                        空闲车位
                    </h3>
                    <div class="value">{{ stats.availableSeats }}</div>
                </div>
                <div class="stat-card">
                    <h3>
                        <i class="fas fa-users"></i>
                        账户数量
                    </h3>
                    <div class="value">{{ stats.totalMembers }}</div>
                </div>
                <div class="stat-card">
                    <h3>
                        <i class="fas fa-yen-sign"></i>
                        今日收入
                    </h3>
                    <div class="value">￥{{ stats.todayIncome }}</div>
                </div>
            </div>
            <div class="parking-overview">
                <h2>车位状态概览</h2>
                <div class="status-indicators">
                    <div class="status-indicator">
                        <div class="indicator available"></div>
                        <span>空闲</span>
                    </div>
                    <div class="status-indicator">
                        <div class="indicator occupied"></div>
                        <span>占用</span>
                    </div>
                    <div class="status-indicator">
                        <div class="indicator maintenance"></div>
                        <span>维护</span>
                    </div>
                </div>
                <div class="parking-grid">
                    <div class="parking-section" v-for="section in ['A区', 'B区', 'C区']" :key="section">
                        <h3>{{ section }}</h3>
                        <div class="parking-row">
                            <div v-if="parkingSpots.filter(spot => spot.seatSection === section).length === 0" class="parking-spot empty">
                                <div class="spot-number">无车位</div>
                            </div>
                            <div v-for="spot in parkingSpots.filter(spot => spot.seatSection === section)" 
                                 :key="spot.seatId" 
                                 :class="['parking-spot', getStatusClass(spot.seatState, highlightedSpots.includes(spot.seatId))]" 
                            >
                                <div class="spot-number">{{ spot.seatNum }}</div>
                                <div class="spot-info">
                                    <span class="car-number">车牌号: {{ spot.carNumber || '无' }}</span>
                                    <span class="user-id">用户ID: {{ spot.userId || '无' }}</span>
                                    <span class="seat-type">车位类型: {{ spot.seatTag }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="quick-search">
                <h2>快捷搜索</h2>
                <div class="search-form">
                    <div class="search-input">
                        <i class="fas fa-search"></i>
                        <input type="text" v-model="searchKey" placeholder="请输入车牌号码" @keyup.enter="handleSearch">
                    </div>
                    <button @click="handleSearch">
                        <i class="fas fa-search"></i>
                        搜索
                    </button>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html> 